<template>
  <a-modal :title="title" :width="1200" :visible="visible" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="账号">
              <a-input placeholder="请输入账号" v-model="queryParam.username"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item label="性别">
              <a-select v-model="queryParam.sex" placeholder="请选择性别">
                <a-select-option value="">请选择性别查询</a-select-option>
                <a-select-option value="1">男性</a-select-option>
                <a-select-option value="2">女性</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <template v-if="toggleSearchStatus">
            <a-col :span="6">
              <a-form-item label="邮箱">
                <a-input placeholder="请输入邮箱" v-model="queryParam.email"></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="手机号码">
                <a-input placeholder="请输入手机号码" v-model="queryParam.phone"></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="状态">
                <a-select v-model="queryParam.status" placeholder="请选择状态">
                  <a-select-option value="">请选择状态</a-select-option>
                  <a-select-option value="1">正常</a-select-option>
                  <a-select-option value="2">解冻</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>

          <a-col :span="6">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--    update-begin author:kangxiaolin   date:20190921   for:系统发送通知 用户多选失败 #513  -->
    <a-table
      ref="table"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      @change="handleTableChange"
    >
      <!--     update-end   author:kangxiaolin  date:20190921     for:系统发送通知 用户多选失败 #513 -->
    </a-table>
  </a-modal>
</template>

<script>
import { filterObj } from '@/utils/util'

import { getUserList } from '@/api/api'

export default {
  name: 'SelectUserListModal',
  components: {},
  data() {
    return {
      title: '选择用户',
      queryParam: {},
      columns: [
        {
          title: '用户账号',
          align: 'center',
          dataIndex: 'username',
          fixed: 'left',
          width: 200,
        },
        {
          title: '用户名称',
          align: 'center',
          dataIndex: 'realname',
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex',
          customRender: function (text) {
            if (text == 1) {
              return '男'
            } else if (text == 2) {
              return '女'
            } else {
              return text
            }
          },
        },
        {
          title: '手机号码',
          align: 'center',
          dataIndex: 'phone',
        },
        {
          title: '邮箱',
          align: 'center',
          dataIndex: 'email',
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          customRender: function (text) {
            if (text == 1) {
              return '正常'
            } else if (text == 2) {
              return '冻结'
            } else {
              return text
            }
          },
        },
      ],
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      selectedRowKeys: [],
      selectionRows: [],
      visible: false,
      toggleSearchStatus: false,
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    add(selectUser, userIds) {
      this.visible = true
      this.edit(selectUser, userIds)
    },
    edit(selectUser, userIds) {
      //控制台报错
      if (userIds && userIds.length > 0) {
        this.selectedRowKeys = userIds.split(',')
      } else {
        this.selectedRowKeys = []
      }
      if (!selectUser) {
        this.selectionRows = []
      } else {
        var that = this
        that.selectionRows = []
        selectUser.forEach(function (record, index) {
          console.log(record)
          that.selectionRows.push({ id: that.selectedRowKeys[index], realname: record.label })
        })
        // this.selectionRows = selectUser;
      }
    },
    loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      let params = this.getQueryParams() //查询条件
      getUserList(params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
      })
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      //--update-begin----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379----
      // param.current = this.ipagination.current;
      // param.pageSize = this.ipagination.pageSize;
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      //--update-end----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379---
      return filterObj(param)
    },
    getQueryField() {
      let str = 'id,'
      for (let a = 0; a < this.columns.length; a++) {
        str += ',' + this.columns[a].dataIndex
      }
      return str
    },
    //--update-begin----author:kangxiaolin---date:20190921------for:系统发送通知 用户多选失败 #513----
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      //update-begin---author:wangshuai ---date:20211227  for：全选不好用------------
      this.selectionRows = selectionRows
      //update-end---author:wangshuai ---date:20211227  for：全选不好用------------
    },
    searchReset() {
      let that = this
      Object.keys(that.queryParam).forEach(function (key) {
        that.queryParam[key] = ''
      })
      that.loadData(1)
    },
    handleTableChange(pagination, filters, sorter) {
      // 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    handleCancel() {
      this.selectionRows = []
      this.selectedRowKeys = []
      this.visible = false
    },
    handleOk() {
      this.$emit('choseUser', this.selectionRows)
      this.handleCancel()
    },
    searchByquery() {
      this.loadData(1)
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
  },
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}
.anty-row-operator button {
  margin: 0 5px;
}
.ant-btn-danger {
  background-color: #ffffff;
}

.ant-modal-cust-warp {
  height: 100%;
}
.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}
.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}

.anty-img-wrap {
  height: 25px;
  position: relative;
}
.anty-img-wrap > img {
  max-height: 100%;
}
</style>
